<template>
  <el-card>
    <div slot="header">
      <span>商品列表</span>
      <el-button style="float: right; padding: 10px" type="success" icon="el-icon-tickets" size="medium" @click="exportExcel">导出Excel</el-button>
      <el-button style="float: right; padding: 10px; margin-right: 10px" type="primary" icon="el-icon-circle-plus-outline" size="medium" @click="toAddItem">增加商品</el-button>
    </div>
    <el-table
      :data="items"
      height="80vh"
      border
      style="width: 100%"
    >
      <!-- 商品名称 -->
      <el-table-column
        prop="itemName"
        label="商品名称"
        width="150"
      >
      </el-table-column>
      <!-- 商品价格 -->
      <el-table-column
        prop="itemPrice"
        label="商品价格"
        width="100"
      >
      </el-table-column>
      <!-- 商品描述 -->
      <el-table-column
        prop="itemDesc"
        label="商品描述"
        width="200"
      >
        <template slot-scope="storeDesc">
          <el-tooltip
            effect="dark"
            :content="storeDesc.row.itemDesc"
            placement="top-start"
          >
            <span>{{storeDesc.row.itemDesc.length > 10 ? storeDesc.row.itemDesc.substr(0,10) + '...' : storeDesc.row.itemDesc}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- 商品封面 -->
      <el-table-column
        prop="thumb"
        label="商品封面"
        width="150"
      >
        <template slot-scope="storeThumb">
          <el-image
            :src="storeThumb.row.thumb"
            alt="图片不见惹"
            style="width: 100px; height: 100px"
          ></el-image>
        </template>
      </el-table-column>
      <!-- 上架时间 -->
      <el-table-column
        prop="createDate"
        label="上架时间"
        width="200"
      >
        <template slot-scope="storeCreateDate">
          <span>{{storeCreateDate.row.createDate}}</span>
        </template>
      </el-table-column>
      <!-- 商品详情 -->
      <el-table-column
        prop="context"
        label="商品详情"
        width="250"
      >
        <template slot-scope="storeContext">
          <div v-html="storeContext.row.context"></div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        label="操作"
        width="150"
        fixed="right"
      >
        <template slot-scope="storeEdit">
          <el-button
            size="mini"
            @click="editItem(storeEdit.row.id)"
            type="primary"
            icon="el-icon-edit"
            style="margin-right:10px"
          ></el-button>
          <el-popconfirm
            placement="top"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-question"
            icon-color="#E6A23C"
            title="确定删除吗？"
            @confirm="delItems(storeEdit.row.id)"
          >
            <el-button
              slot="reference"
              type="danger"
              size="mini"
              icon="el-icon-delete"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import dayjs from 'dayjs'
import { fetchItem, delItem } from '_api'
// 导出excel表的包
const ExportJsonExcel = require('js-export-excel')
export default {
  data () {
    return {
      items: [],
      total: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    // 获取商品列表
    fetchItems (obj = {}) {
      fetchItem(obj).then(res => {
        if (res.data.code === 200) {
          this.items = res.data.data.lists
          this.total = res.data.data.total
          this.items.forEach(item => {
            item.createDate = dayjs(item.createDate).format('YYYY-MM-DD HH:mm:ss')
          })
        }
      })
    },
    // 修改商品信息
    editItem (id) {
      console.log(id)
    },
    // 删除商品
    delItems (id) {
      delItem({ id }).then(res => {
        if (res.data.code === 200) {
          console.log(this)
          this.$message.success({
            message: '删除成功',
            showClose: true,
            duration: 1500,
            onClose: () => {
              this.$router.go(0)
            }
          })
        }
      })
    },
    // 监听pageSize变化
    handleSizeChange (pageSize) {
      this.fetchItems({
        pageSize,
        page: this.currentPage
      })
    },
    // 监听currentPage变化
    handleCurrentChange (currentPage) {
      this.fetchItems({
        pageSize: this.pageSize,
        page: currentPage
      })
    },
    //  增加商品界面
    toAddItem () {
      this.$router.push('/admin/additem')
    },
    // 导出Excel
    exportExcel () {
      // 对导出的table数据进行处理
      const option = {}
      option.fileName = 'goodsList'
      const sheetData = this.items
      option.datas = [
        {
          sheetData,
          // 每一个sheet的name
          sheetName: '商品数据',
          // 列标题
          sheetHeader: ['id', '商品名称', '商品价格', '商品描述', '商品封面', '上架时间', '商品详情'],
          // 每列宽度
          columnWidths: [3, 8, 5, 20, 20, 6, 8]
        }
      ]
      const toExcel = new ExportJsonExcel(option)
      toExcel.saveExcel()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
